<template>
  <div class="custom-wrap-container">
    <div class="custom-wrap-header" style="height: 370px">
      <div id="waterDataAnalysisMapContainer" style="width: 100%;height: 370px;"></div>
      <div class="header-left-piece-up">
        <!--<p class="custom-wrap-title custom-title-s02" style="top:6px; left:3%; width:94%;">线路数据：</p>-->
        <div class="lxTitle"></div>
        <div class="lxText">线路数据</div>
        <ul class="custom-roadBrief-list">
          <li style="color: #fe9245;"><span class="custom-icon-road"></span><span>公路条数</span><span>123条</span></li>
          <li style="color: #c21f92;"><span class="custom-icon-railway"></span><span>铁路桥</span><span>19条</span></li>
          <li style="color: #58a6e7;"><span class="custom-icon-culvert"></span><span>涵洞</span><span>60条</span></li>
          <li style="color: #9efbbc;"><span class="custom-icon-village"></span><span>沿线村庄</span><span>43条</span></li>
          <li style="color: #fc1149;"><span class="custom-icon-school"></span><span>设计学校</span><span>33条</span></li>
        </ul>
      </div>
      <div id="headLeftPieceInterlayerUp"></div>
      <div class="header-right-piece-up">
        <!--<p class="custom-wrap-title custom-title-s02" style="top:8px; left:3%; width:94%;">新闻动态：</p>-->
        <div class="lx2Title"></div>
        <div class="lx2Text">新闻动态</div>
        <div id="custonTimer" style="margin-top:5%">
          <custom-timer :timer-data="timerData"></custom-timer>
        </div>
      </div>
      <div id="headRightPieceInterlayerUp"></div>
    </div>
    <div class="custom-wrap-main bottom">
      <div id="mainLeftInterlayerHalf"></div>
      <div class="main-left-piece-half">
        <!--<p class="custom-wrap-title custom-title-sl">护路护线公里：</p>-->
        <div class="lx3Title"></div>
        <div class="lx3Text">护路护线公里</div>
        <div id="roadEchart" style="width:100%;height:100%;"></div>
      </div>
      <div id="mainRightInterlayerHalf"></div>
      <div class="main-right-piece-half">
        <!--<p class="custom-wrap-title custom-title-sl">涉及护路护线事件：</p>-->
        <div class="lx4Title"></div>
        <div class="lx4Text">涉及护路护线事件</div>
        <div id="roadCaseEchart" style="width:100%;height:100%;"></div>
      </div>
    </div>
  </div>
</template>

<script>
import CustomTimer from '@/components/CustomTimer'
export default {
  data () {
    return {
      AMapUI: null,
      AMap: null,
      map: null,
      timerData: [
        { name: '关于加强矛盾纠纷排查工作通知', infor: '2019-09-14', className: 'custon-timer-circle-active' },
        { name: '百姓矛盾无小事', infor: '2019-09-14' },
        { name: '加强矛盾调解人员业务培训通知', infor: '2019-09-14' },
        { name: '矛盾纠纷化解要及时有效', infor: '2019-09-14' },
        { name: '基层矛排常态化', infor: '2019-09-14' },
        { name: '通知公告', infor: '2019-09-14' },
        { name: '通知公告', infor: '2019-09-14' },
        { name: '通知公告', infor: '2019-09-14' },
        { name: '通知公告', infor: '2019-09-14' },
        { name: '通知公告', infor: '2019-09-14' },
        { name: '通知公告', infor: '2019-09-14' },
        { name: '通知公告', infor: '2019-09-14' }
      ]
    }
  },
  components: {
    CustomTimer
  },
  mounted () {
    this.init()
  },
  methods: {
    init () {
      this.AMapUI = window.AMapUI
      this.AMap = window.AMap
      this.loadDistrictExplorer()
      this.loadRoadEchart()
    },
    loadRoadEchart () {
      let roadEchart = this.$echarts.init(document.getElementById('roadEchart'))
      let roadCaseEchart = this.$echarts.init(document.getElementById('roadCaseEchart'))
      let color1 = new this.$echarts.graphic.LinearGradient(
        0, 0, 0, 1,
        [
          {offset: 0, color: '#fe9943'},
          {offset: 0.5, color: '#fd674e'},
          {offset: 1, color: '#f83a54'}
        ]
      )
      let color2 = new this.$echarts.graphic.LinearGradient(
        0, 0, 0, 1,
        [
          {offset: 0, color: '#f7f586'},
          {offset: 0.5, color: '#c5f9a7'},
          {offset: 1, color: '#98fbc4'}
        ]
      )
      const getOption = param => {
        return {
          color: ['#3398DB'],
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            },
            formatter: param.formatter
          },
          grid: {
            top: '10%',
            left: '1%',
            right: '1%',
            bottom: '15%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              data: param.axisData,
              axisTick: {
                alignWithLabel: true
              },
              axisLine: {
                lineStyle: {
                  color: '#ccc'
                }
              },
              axisLabel: {
                color: 'white',
                interval: 0
              }
            }
          ],
          yAxis: [
            {
              type: 'value',
              name: param.yAxisName,
              nameTextStyle: { color: 'white' },
              splitLine: {
                lineStyle: {
                  type: 'dashed'
                },
                show: true
              },
              axisLine: {
                lineStyle: {
                  color: '#ccc'
                }
              },
              axisLabel: {
                // formatter: '{value} K',
                color: 'white'
              }
            }
          ],
          series: [
            {
              name: '护路护线',
              type: 'bar',
              barWidth: '30%',
              itemStyle: {
                normal: {
                  color: param.color
                }
              },
              data: param.seriesData
            }
          ]
        }
      }
      let param = {
        formatter: '{a0}<br/>{b0}：{c0} 公里',
        axisData: ['公路', '铁路', '水路', '输油气管道', '电力设施', '电信设施', '广播电视设施', '其他'],
        yAxisName: 'km',
        seriesData: [5530, 7980, 6500, 7344, 5000, 6890, 5640, 5130],
        color: color1
      }
      roadEchart.setOption(getOption(param))
      param.formatter = '{a0}<br/>{b0}：{c0} 件'
      param.yAxisName = '数量'
      param.seriesData = [8, 12, 10, 11, 7, 11, 8, 7]
      param.color = color2
      roadCaseEchart.setOption(getOption(param))
    },
    loadDistrictExplorer () {
      let m = this
      var opts = {
        subdistrict: 1,
        extensions: 'all',
        level: 'district'
      }
      var district = new AMap.DistrictSearch(opts)
      district.search('平桥区', function (status, result) {
        var bounds = result.districtList[0].boundaries
        var mask = []
        let polygons = []
        for (let i = 0; i < bounds.length; i += 1) {
          var polygon = new AMap.Polygon({
            strokeWeight: 1,
            path: bounds[i],
            fillOpacity: 0.4,
            fillColor: '#1426a1',
            strokeColor: '#0091ea'
          })
          polygons.push(polygon)
          mask.push([bounds[i]])
        }
        m.map = new AMap.Map('waterDataAnalysisMapContainer', {
          mask: mask,
          center: [114.091104, 32.148489],
          viewMode: '3D',
          labelzIndex: 9999,
          pitch: 40,
          zoom: 10
        })
        m.map.setMapStyle('amap://styles/8d5705fe9baf14eec73c1a9d60bfbaad') // 设置主题样式
        m.map.add(polygons)
        let maskerIn = new AMap.Marker({
          position: [114.091104, 32.148489]
        })
        m.map.add(maskerIn)
        // 添加高度面
        var object3Dlayer = new AMap.Object3DLayer({zIndex: 1})
        m.map.add(object3Dlayer)
        var height = -8000
        var color = '#ccc'
        var wall = new AMap.Object3D.Wall({
          path: bounds,
          height: height,
          color: color
        })
        wall.transparent = true
        object3Dlayer.add(wall)
        m.map.panBy(0, 60) // 设置显示位置  偏移量 第一个参数 X 轴  第二参数 Y 轴
      })
    }
  }
}
</script>

<style scoped>
.header-left-piece-up,.header-right-piece-up,
#headLeftPieceInterlayerUp,#headRightPieceInterlayerUp{
  width: 25%;
  height: 370px;
  position: absolute;
  top: 0;
}
#headLeftPieceInterlayerUp,#headRightPieceInterlayerUp{
  z-index: 999;
  background-color: #101977;
  border: 1px solid #07a6ff;
  opacity: 0.2;
  border-radius: 6px;
}
.header-left-piece-up{
  left: 0;
  z-index: 1111;
}
.header-right-piece-up{
  right: 0;
  z-index: 1111;
}
#headLeftPieceInterlayerUp{
  left: 0;
}
#headRightPieceInterlayerUp{
  right: 0;
}
.custom-roadBrief-list{
  padding: 0 24px;
  margin-top: 5%;
}
.custom-roadBrief-list li{
  position: relative;
  display: flex;
  padding-bottom: 6px;
  margin-bottom: 6px;
  border-bottom: 1px solid #1f3568;
}
.custom-roadBrief-list li:last-child{
  border-bottom: none;
}
.custom-roadBrief-list li span{
  display: inline-block;
  line-height: 50px;
}
.custom-roadBrief-list li span:first-child{
  margin-right: 16px;
}
.custom-roadBrief-list li span:nth-child(3){
  position: absolute;
  top: 0;
  right: 6px;
}
.custom-icon-road,.custom-icon-railway,.custom-icon-culvert,.custom-icon-village,.custom-icon-school{
  width: 58px;
  height: 50px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.custom-icon-road{
  background-image: url('~@/assets/bigdata/img/icon_road.png');
}
.custom-icon-railway{
  background-image: url('~@/assets/bigdata/img/icon_railway.png');
}
.custom-icon-culvert{
  background-image: url('~@/assets/bigdata/img/icon_culvert.png');
}
.custom-icon-village{
  background-image: url('~@/assets/bigdata/img/icon_village.png');
}
.custom-icon-school{
  background-image: url('~@/assets/bigdata/img/icon_school.png');
}
  .bottom{
    margin-bottom: 30px;
  }
  .lxTitle{
    width: 100%;
    height: 20px;
    background-image: url('~@/assets/bigdata/img/lx1.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin-top: 20px;
  }
  .lx2Title{
    width: 100%;
    height: 20px;
    background-image: url('~@/assets/bigdata/img/lx2.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin-top: 20px;
  }
  .lx3Title{
    width: 100%;
    height: 20px;
    background-image: url('~@/assets/bigdata/img/lx3.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin-top: 20px;
  }
  .lx4Title{
    width: 100%;
    height: 20px;
    background-image: url('~@/assets/bigdata/img/lx4.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin-top: 20px;
  }
  .lxText{
    color: white;
    position: absolute;
    top: 7px;
    left: 8%;
  }
.lx2Text{
  color: white;
  position: absolute;
  top: 7px;
  left: 7%;
}
.lx3Text{
  color: white;
  position: absolute;
  top: 7px;
  left: 3%;
}
.lx4Text{
  color: white;
  position: absolute;
  top: 8px;
  left: 2%;
}
</style>
